import React, { Component, useEffect, useState, useRef } from 'react';
import * as echarts from 'echarts';

export default ({ data }) => {
  const kpiRef = useRef();
  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(kpiRef.current);
    const { innerWorkCount = 0, publicServiceCount = 0 } = data;

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '项目类型',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
      },
      legend: {
        bottom: 'bottom',
        data: ['内部办公', '公众服务'],
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['45%', '47%'],
          data: [
            { value: innerWorkCount, name: '内部办公' },
            { value: publicServiceCount, name: '公众服务' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }, [data]);

  return <div ref={kpiRef} style={{ height: 300, marginTop: 30 }}></div>;
};
